<template>
  <div class="song-lyric">
    <img :src="picUrl" alt="" class="song-img" />
    <div
      style="
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        overflow-y: auto;
        height: 600px;
        scrollbar-width: none;
      "
    >
      <h1 class="lyric-title">歌词</h1>
      <!-- 有歌词 -->
      <ul class="has-lyric" v-if="lyr.length" key="index">
        <li v-for="(item, index) in lyr" v-bind:key="index">
          {{ item[1] }}
        </li>
      </ul>
      <!-- 没有歌词 -->
      <div v-else class="no-lyric" key="no-lyric">
        <span style="color: #fff">暂无歌词</span>
      </div>
    </div>
  </div>
</template>
<script>
import { mixin } from "../mixins";
import { mapGetters } from "vuex";

export default {
  name: "lyric",
  mixins: [mixin],
  data() {
    return {
      lyr: [], //当前乐馆的歌词
    };
  },
  computed: {
    ...mapGetters([
      "curTime", //当前乐馆播放到的位置
      "id", //当前播放的乐馆id
      "lyric", //歌词
      "listIndex", //当前乐馆在乐馆中的位置
      "listOfSongs", //当前乐馆列表
      "picUrl", //当前音乐的图片
    ]),
  },
  created() {
    this.lyr = this.lyric;
  },
  watch: {
    id: function () {
      this.lyr = this.parseLyric(this.listOfSongs[this.listIndex].lyric);
    },
    curTime: function () {
      if (this.lyr.length > 0) {
        for (let i = 0; i < this.lyr.length; i++) {
          if (this.curTime >= this.lyr[i][0]) {
            for (let j = 0; j < this.lyr.length; j++) {
              document.querySelectorAll(".has-lyric li")[j].style.color =
                "#fff";
              document.querySelectorAll(".has-lyric li")[j].style.fontSize =
                "15px";
            }
            if (i >= 0) {
              document.querySelectorAll(".has-lyric li")[i].style.color =
                "#95d2f6";
              document.querySelectorAll(".has-lyric li")[i].style.fontSize =
                "25px";
            }
          }
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../assets/css/lyric.scss";
.song-lyric {
  background-image: v-bind(picUrl);
}
</style>
